<template>
  <div class="mod-demo-ueditor" v-cloak>
    <el-card class="box-card">
      <el-form :inline="true">
        <el-form-item label="主数据工号:">
          <el-input
            v-model="searchDataFrom.acc"
            placeholder="请输入工号"
            style="width: 200px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="部门分类:" width="300">
          <el-select
            v-model="searchDataFrom.departmentType"
            placeholder="请选择部门"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="option in scopeZeroList"
              :key="option.name"
              :label="option.name"
              :value="option.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提醒区域范围：" width="300">
          <el-cascader
            style="width: 100%"
            v-model="cascadervalue"
            clearable
            :options="scopeOneList"
            separator="/"
            :props="{
              label: 'name',
              value: 'name',
            }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <el-form :inline="true" @keyup.enter.native="getCallerNo()">
        <el-form-item class="button_color">
          <!-- <el-button type="primary"  icon="el-icon-circle-plus-outline" size="medium" @click="handleViewEdit()"
            >新增场景</el-button
          > -->
          <el-button
            type="button_tow"
            icon="el-icon-circle-plus-outline"
            size="medium"
            @click="handleViewEdit()"
            >新增场景</el-button
          >
          <!-- <el-button
            @click="handleDelete()"
            type="danger"
            :disabled="dataListSelections.length <= 0"
            >批量删除</el-button
          > -->
        </el-form-item>
      </el-form>
      <el-table :data="dataCallList" style="width: 100%" class="ei_dialog">
        <!-- <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
          prop="id"
          label=""
        >
        </el-table-column> -->
        <el-table-column type="index" label="序号" align="center" width="60">
        </el-table-column>
        <el-table-column
          prop="sceneName"
          label="场景名称"
          header-align="center"
          align="center"
          width="130"
        >
        </el-table-column>
        <el-table-column
          prop="sceneDesc"
          label="场景编码"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="manufactorName"
          label="接入方厂家名称"
          header-align="center"
          align="center"
          width="130"
        >
        </el-table-column>
        <el-table-column
          prop="manufactorIp"
          label="接入方IP地址"
          header-align="center"
          align="center"
          width="130"
        >
        </el-table-column>
        <el-table-column
          prop="manufactorUse"
          label="接入方用途"
          header-align="center"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover">
              <template>
                <div class="set-popper" v-html="scope.row.manufactorUse"></div>
              </template>
              <div slot="reference" class="set-content">
                {{
                  scope.row.manufactorUse === null ||
                  scope.row.manufactorUse === ""
                    ? ""
                    : scope.row.manufactorUse.length > 5
                    ? scope.row.manufactorUse.substring(0, 3) + "..."
                    : scope.row.manufactorUse
                }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="manufactorSystem"
          label="系统名称"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="officialPeople"
          label=""
          header-align="center"
          align="center"
          width="200"
          :render-header="renderHeader"
        >
        </el-table-column> -->
        <el-table-column
          prop="officialPeople"
          label="局方负责人"
          header-align="center"
          align="center"
          width="100"
        >
        </el-table-column>

        <el-table-column
          prop="manufactorDept"
          label="归属部门"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="manufactorPeople"
          label=""
          header-align="center"
          align="center"
          width="200"
          :render-header="renderHeaderTow"
        >
        </el-table-column> -->
        <el-table-column
          prop="manufactorPeople"
          label="厂家负责人"
          header-align="center"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="manufactorApikey"
          label="接入方APIKEY"
          header-align="center"
          align="center"
          width="130"
        >
          <template slot-scope="scope">
            {{
              scope.row.manufactorApikey === null
                ? "--"
                : scope.row.manufactorApikey
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="remail"
          label="备注"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.remail === null ? "--" : scope.row.remail }}
          </template>
        </el-table-column>
        <el-table-column label="审批状态" align="center">
          <template slot-scope="scope">
            <!-- <el-tag
              size="medium"
              type="success"
              v-html="getIWorkState(scope.row)"
            ></el-tag> -->
            <!-- <span v-html="getIWorkState(scope.row)" :style="setIconStyle(scope.row.examineStatus)"> </span> -->
            <span
              v-html="getIWorkState(scope.row)"
              style="color: rgb(103, 194, 58)"
            >
            </span>
            <!-- <span v-html="getIWorkState(scope.row)" > </span> -->
          </template>
        </el-table-column>
        <el-table-column label="使用状态" align="center" prop="userStatus">
          <template slot-scope="scope">
            <span style="color: rgb(103, 194, 58)"
              >{{ scope.row.userStatus }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="上线时间"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime === null ? "--" : scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="230"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleViewEdit(scope.row)"
              >修改
            </el-button>
            <el-button
              :disabled="
                scope.row.examineStatus === 4 || scope.row.examineStatus === 1
                  ? true
                  : false
              "
              size="mini"
              type="text"
              icon="el-icon-message"
              @click="handleSend(scope.row.id)"
              >送审
            </el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-delete"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
    <!-- 新增 编辑弹框 -->
    <el-dialog
      :title="!dataForm.id ? '新增场景' : '修改场景'"
      :close-on-click-modal="false"
      :visible.sync="addorUpdateVisible"
      v-if="addorUpdateVisible"
      @close="addorUpdateVisible = false"
      width="60%"
      class="apikey"
    >
      <span slot="title" class="edit-form-apikey">{{
        !dataForm.id ? "新增场景" : "修改场景"
      }}</span>
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        :inline="true"
        @keyup.enter.native="dataFormSubmit()"
        label-width="200px"
        class="demo-apikeyForm"
      >
        <el-form-item label="场景名称:" prop="sceneName">
          <el-input
            v-model="dataForm.sceneName"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="场景编码:" prop="sceneDesc">
          <el-input
            v-model="dataForm.sceneDesc"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="场景分类:" prop="sceneType">
          <el-input
            v-model="dataForm.sceneType"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="接入方厂家名称:" prop="manufactorName">
          <el-input
            v-model="dataForm.manufactorName"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="接入方IP地址:" prop="manufactorIp">
          <el-input
            v-model="dataForm.manufactorIp"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="接入方用途:"
          prop="manufactorUse"
          style="width: 100%"
        >
          <el-input
            type="textarea"
            :rows="2"
            v-model="dataForm.manufactorUse"
            placeholder="请输入"
            style="width: 52.825rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="系统名称:" prop="manufactorSystem">
          <el-input
            v-model="dataForm.manufactorSystem"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="接局方负责人:"
          prop="officialPeople"
          class="f-box-calss"
        >
          <div class="f-box-calss-d">（主数据工号+姓名）</div>
          <el-input
            v-model="dataForm.officialPeople"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="归属部门:" prop="manufactorDept">
          <el-input
            v-model="dataForm.manufactorDept"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="厂家负责人:"
          prop="manufactorPeople"
          class="f-box-calss"
        >
          <div class="f-box-calss-d">（主数据工号+姓名）</div>
          <el-input
            v-model="dataForm.manufactorPeople"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="接入方APIKEY" prop="manufactorApikey">
          <el-input
            v-model="dataForm.manufactorApikey"
            placeholder="请输入"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item> -->
        <el-form-item label="审核状态:" prop="examineStatus">
          <el-input
            v-model="dataForm.examineStatus"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
          <!-- <el-select
            v-model="dataForm.examineStatus"
            style="width: 19.125rem"
            placeholder="请输入审核状态"
          >
            <el-option label="未审核" value="0"></el-option>
            <el-option label="一级审核" value="1"></el-option>
            <el-option label="未通过" value="2"></el-option>
            <el-option label="已通过" value="3"></el-option>
            <el-option label="二级复核（流程结束）" value="4"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="使用状态:" prop="userStatus">
          <el-input
            v-model="dataForm.userStatus"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="remail">
          <el-input
            type="textarea"
            :rows="2"
            v-model="dataForm.remail"
            placeholder="请输入"
            style="width: 52.825rem"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" style="text-align: center !important; width: 100%">
        <el-button @click="dataResetForm('dataForm')">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit('dataForm')"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      switchValue1: true,
      switchValue2: false,
      value: true,

      dataCallList: [], //初始化数据
      cascadervalue: [],
      cascadervalueTow: [],
      searchDataFrom: {
        acc: "", // 工号
        scope: "", // 提醒区域范围
        departmentType: "", //部门
      },
      options: [
        { label: "发展人", value: 0 },
        { label: "受理人", value: 1 },
        { label: "五级包区", value: 2 },
      ],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dialogTableVisible: false,
      dataListSelections: [], //多选
      addorUpdateVisible: false,
      dataForm: {
        id: 0,
        modelName: "",
        sceneName: "", //接入方场景名称
        manufactorName: "", //接入方厂家名称
        manufactorIp: "", //接入方IP地址
        sceneDesc: "", //场景编码
        sceneType:"",//场景分类
        manufactorUse: "", //接入方用途
        manufactorSystem: "", //接入方系统
        officialPeople: "", //局方负责人（主数据工号+姓名）
        manufactorDept: "", //局方部门
        manufactorPeople: "", //厂家负责人（主数据工号+姓名）
        manufactorApikey: "", //接入方APIKEY
        examineStatus: "", //审核状态
        userStatus:"",//使用状态
        remail: "", //备注
      },
      scopeZeroList: [], //部门数据
      scopeOneList: [], //提醒区域范围数据
      dataRule: {
        sceneName: [
          {
            required: true,
            message: "接入方场景名称不能为空",
            trigger: "blur",
          },
        ],
        manufactorName: [
          {
            required: true,
            message: "接入方厂家名称不能为空",
            trigger: "blur",
          },
        ],
        manufactorIp: [
          { required: true, message: "接入方IP地址不能为空", trigger: "blur" },
        ],
        sceneDesc: [
          { required: true, message: "场景编码不能为空", trigger: "blur" },
        ],
        sceneType: [
          { required: true, message: "场景分类不能为空", trigger: "blur" },
        ],
        manufactorUse: [
          { required: true, message: "接入方用途不能为空", trigger: "blur" },
        ],
        manufactorSystem: [
          { required: true, message: "接入方系统不能为空", trigger: "blur" },
        ],
        officialPeople: [
          {
            required: true,
            message: "局方负责人（主数据工号+姓名）不能为空",
            trigger: "blur",
          },
        ],
        manufactorDept: [
          {
            required: true,
            message: "局方部门不能为空",
            trigger: "change",
          },
        ],
        manufactorPeople: [
          {
            required: true,
            message: "厂家负责人（主数据工号+姓名）不能为空",
            trigger: "blur",
          },
        ],
        manufactorApikey: [
          { required: true, message: "接入方APIKEY不能为空", trigger: "blur" },
        ],
        examineStatus: [
          { required: true, message: "审核状态不能为空", trigger: "blur" },
        ],
        userStatus: [
          { required: true, message: "使用状态不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // this.getDataList()
  },
  //修改颜色
  computed: {
    setIconStyle() {
      return function (reviewedStatus) {
        console.log("reviewedStatus===", reviewedStatus);
        // return index === 1 ? "color: rgb(64,158,255)" : "color: rgb(230,162,60)";
        let str = "";
        switch (reviewedStatus) {
          case "未审核":
            str = "color: rgb(245,108,108)";
            break;
          case 4:
            str = "color: rgb(64,158,255)";
            break;
          case "未提交":
            str = "color: rgb(230,162,60)";
            break;
          case "已通过":
            str = "color: rgb(103,194,58)";
            break;
          default:
            str = "color: rgb(64,158,255)";
        }
        return str;
      };
    },
  },
  mounted() {},
  activated() {
    this.getDataList();
  },
  watch: {
    dialogTableVisible(newVal, oldVal) {
      if (newVal === false) {
        console.log("哈哈哈");
        this.dataFormPerson.empeeAcct = "";
      }
    },
  },
  methods: {
    //获取列表数据
    getDataList() {
      this.$http({
        url: this.$http.adornUrl("/cpcpManufactorScene/getlist"),
        method: "get",
        params: this.$http.adornParams({
          pageNum: this.pageIndex,
          pageSize: this.pageSize,
          acc: this.searchDataFrom.acc,
          scope: this.searchDataFrom.scope,
          departmentType: this.searchDataFrom.departmentType,
        }),
      }).then((res) => {
        console.log(res, "resresres");
        if (res && res.data.code === 0) {
          this.dataCallList = res.data.data.records;
          this.totalPage = res.data.data.total;
        } else {
          this.$message.error(res.data.msg);
          this.dataCallList = [];
          this.totalPage = 0;
        }
        // console.log(this.dataCallList);
        // console.log(this.totalPage);
      });
    },
    //渲染表头，换行
    renderHeader(h, para) {
      return h("div", {
        attrs: {
          class: "cell",
        },
        // domProps: {
        //   innerHTML: "设备详情</br>(MAC地址/占用空间)",
        // },
        //或者
        domProps: {
          innerHTML:
            "<span>" +
            "局方负责人" +
            " </span></br>" +
            '<span class="titlered" style:"color:red">' +
            "（主数据工号 + 姓名）" +
            " </span>",
        },
      });
    },
    //渲染表头，换行
    renderHeaderTow(h, para) {
      return h("div", {
        attrs: {
          class: "cell",
        },
        // domProps: {
        //   innerHTML: "设备详情</br>(MAC地址/占用空间)",
        // },
        //或者
        domProps: {
          innerHTML:
            "<span>" +
            "厂家负责人" +
            " </span></br>" +
            '<span class="titlered" style:"color:red">' +
            "（主数据工号 + 姓名）" +
            " </span>",
        },
      });
    },
    getIWorkState(item) {
      let str = "";
      if (item.examineStatus == 0) {
        str = "未审核";
      } else if (item.examineStatus == 1) {
        str += "一级审核";
      } else if (item.examineStatus == 2) {
        str += "未通过";
      } else if (item.examineStatus == 3) {
        str += "已通过";
      } else if (item.examineStatus == 4) {
        str += "流程结束";
      } else {
        str += "";
      }
      return str;
    },
    //查询
    getSearch() {
      this.pageIndex = 1;
      this.getDataList();
    },
    handleChange(value) {
      console.log("value", value);
      this.searchDataFrom.scope = value[1];
    },
    stateValue() {},
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
      console.log(this.dataListSelections);
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    sizeChangeHandleC() {
      this.pageSizeC = val;
      this.pageIndexC = 1;
      this.getPerson(this.series);
    },
    currentChangeHandleC(val) {
      this.pageIndexC = val;
      this.getPerson(this.series);
    },
    // 新增和修改
    handleViewEdit(data) {
      console.log(data);
      this.addorUpdateVisible = true;
      this.dataForm.id = data || 0;
      if (this.dataForm.id === 0) {
        console.log("新增");
        this.dataForm.sceneName = "";
        this.dataForm.manufactorName = "";
        this.dataForm.manufactorIp = "";
        this.dataForm.sceneDesc = "";
        this.dataForm.sceneType = "";
        this.dataForm.manufactorUse = "";
        this.dataForm.manufactorSystem = "";
        this.dataForm.officialPeople = "";
        this.dataForm.manufactorDept = "";
        this.cascadervalueTow = [];
        this.dataForm.manufactorPeople = "";
        this.dataForm.manufactorApikey = "";
        this.dataForm.examineStatus = "";
        this.dataForm.userStatus = "";
      } else {
        console.log("编辑");
        //修改
        let obj = JSON.parse(JSON.stringify(data)); //深拷贝,拷贝的是对象
        this.dataForm.sceneName = obj.sceneName; //接入方场景名称
        this.dataForm.id = obj.id;
        this.dataForm.manufactorName = obj.manufactorName; //接入方厂家名称
        // this.dataFormPerson.modelId = obj.modelId;
        this.dataForm.manufactorIp = obj.manufactorIp; //接入方IP地址
        this.dataForm.sceneDesc = obj.sceneDesc; //场景编码
        this.dataForm.sceneType = obj.sceneType; //场景分类
        this.dataForm.manufactorUse = obj.manufactorUse; //接入方用途
        this.dataForm.manufactorSystem = obj.manufactorSystem; //接入方系统
        this.dataForm.officialPeople = obj.officialPeople; //局方负责人（主数据工号+姓名）
        this.dataForm.manufactorDept = obj.manufactorDept; //局方部门
        this.dataForm.manufactorPeople = obj.manufactorPeople; //厂家负责人（主数据工号+姓名）
        this.dataForm.manufactorApikey = obj.manufactorApikey; //接入方APIKEY
        this.dataForm.examineStatus = obj.examineStatus; //审核状态
        this.dataForm.userStatus = obj.userStatus; //使用状态
        this.dataForm.remail = obj.remail; //备注
      }
    },
    // 表单提交
    dataFormSubmit(dataForm) {
      console.log(this.dataForm);
      this.$refs[dataForm].validate((valid) => {
        if (valid) {
          //   return;
          this.$http({
            url: this.$http.adornUrl(
              `/cpcpManufactorScene/${
                !this.dataForm.id ? "insertCms" : "updateCms"
              }`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              sceneName: this.dataForm.sceneName, //接入方场景名称
              manufactorName: this.dataForm.manufactorName, //接入方厂家名称
              manufactorIp: this.dataForm.manufactorIp, //接入方IP地址
              sceneDesc: this.dataForm.sceneDesc, //场景编码
              sceneType: this.dataForm.sceneType, //场景分类
              manufactorUse: this.dataForm.manufactorUse, //接入方用途
              manufactorSystem: this.dataForm.manufactorSystem, //接入方系统
              officialPeople: this.dataForm.officialPeople, //局方负责人（主数据工号+姓名）
              manufactorDept: this.dataForm.manufactorDept, //局方部门
              manufactorPeople: this.dataForm.manufactorPeople, //厂家负责人（主数据工号+姓名）
              manufactorApikey: this.dataForm.manufactorApikey, //接入方APIKEY
              examineStatus: this.dataForm.examineStatus, //审核状态
              userStatus: this.dataForm.userStatus, //使用状态
              remail: this.dataForm.remail, //备注
            }),
          }).then(({ data }) => {
            console.log(data, "data");
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.addorUpdateVisible = false;
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    dataResetForm(dataForm) {
      this.addorUpdateVisible = false;
      this.$refs[dataForm].resetFields();
    },
    //显示状态
    getState(item) {
      let str = "";
      if (item.state == 1) {
        str = "开启";
      } else {
        str = "关闭";
      }
      return str;
    },
    //删除和批量删除
    handleDelete(id) {
      console.log(id);
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
            //循环点击的对象，拿到每个对象的id
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/cpcpManufactorScene/deleteCms"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //送审
    handleSend(id) {
      this.$http({
        url: this.$http.adornUrl("cpcpManufactorScene/sendCpcpManufactorScene"),
        method: "get",
        params: this.$http.adornParams({
          id: id,
        }),
      }).then((res) => {
        if (res.data && res.data.code === 0) {
          this.$message.success("操作成功");
          this.getDataList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.edit-form {
  width: 50%;
  margin: 0 auto;
}
.enableno {
  color: rgb(240, 15, 15);
}
.enableyes {
  color: rgb(67, 240, 15);
}
.formlist {
  width: 50%;
}
.el_icon_search {
  /* background-color: red; */
  border: 1px solid blue;
  background-color: white;
  color: blue;
}
.el_icon_search:hover {
  background-color: rgb(244, 248, 255);
}
.el-textarea__inner {
  height: 200px;
  overflow-y: auto;
  /* overflow-y: auto;兼容ie  */
}
.ei_dialog /deep/ .titlered {
  color: red !important;
}
/* css */
.button_color .el-button--button_tow {
  background-color: rgb(4, 42, 117) !important;
  border-color: rgb(47, 103, 205) !important;
  color: rgb(70, 130, 241);
}
/* /移入时按钮样式type='button_tow' */
.button_color .el-button--button_tow:hover {
  background: rgb(4, 42, 117) !important;
  border-color: rgb(47, 103, 205) !important;
  color: rgb(70, 130, 241);
  /* opacity: 0.8; */
}
.f-box-calss {
  position: relative;
}
.f-box-calss-d {
  position: absolute;
  top: 20px;
  left: -116px;
  color: rgba(255, 255, 0, 0.8);
  font-size: 12px !important;
}
.demo-apikeyForm /deep/ .el-form-item--medium .el-form-item__content,
.el-form-item--medium .el-form-item__label {
  margin-left: 20px;
}
.edit-form-apikey {
  font-size: 18px;
  color: #fff;
}
.edit-form-apikey::after {
  content: "";
  width: 5px;
  height: 30px;
  position: absolute;
  top: 13px;
  left: 8px;
  border-radius: 50px;
  background: rgb(0, 102, 239);
}
</style>
<style>
.demo-apikeyForm /deep/ .el-dialog__footer {
  text-align: center !important;
}
</style>

